<template>
    <div>
        <!-- 搜索框 -->
        <div class="Top">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
                <el-form-item label="订单号" prop="orderId">
                    <el-input v-model="formInline.orderId" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" prop="status">
                    <el-select v-model="formInline.status" placeholder="活动区域">
                        <el-option label="请选择字典生成" value=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="seath" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset('formInline')" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 开始盘库 -->
        <div class="Newexportsearchrefresh">
            <div class="Addexport">
                <el-button type="primary" @click="Inventory" icon="el-icon-search">开始盘库</el-button>
                <el-button type="warning" plain icon="el-icon-download">导出</el-button>
            </div>
            <div class="Searchrefresh">
                <el-tooltip placement="top">
                    <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                    <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button icon="el-icon-refresh-left" circle @click="Reset('formInline')"></el-button>
                </el-tooltip>
            </div>
        </div>
        <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column prop="orderId" label="订单号" align="center"> </el-table-column>
            <el-table-column prop="createBy" label="盘库人员" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="盘库时间" align="center"> </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">打印预览</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            style="float:right;"
            background
            v-if="hide"
                @size-change="handleSizeChang"
                @current-change="handleCurrentChang"
                :current-page="formInline.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>

        <!-- 开始盘库弹窗 -->
        <el-dialog title="货品管理" :visible.sync="dialogTableVisible">
            <el-form :model="form" ref="form" :inline="true" class="demo-form-inline">
                <el-form-item label="所属仓库" prop="wId">
                    <el-select v-model="form.wId" placeholder="请选择所属仓库">
                        <el-option v-for="item in option" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset('form')" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            <el-button type="primary" plain @click="Confirminventory" style="float: right;">确认盘库</el-button>
            </el-form>
            <el-table :data="gridData">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column property="number" label="货品编码" width="150" align="center"></el-table-column>
                <el-table-column property="name" label="货品名称" width="200" align="center"></el-table-column>
                <el-table-column property="stock" label="账面数量" align="center"></el-table-column>
                <el-table-column prop="realStock" label="盘点数量" align="center">
                    <template slot-scope="scope" v-if="status == 1">
                        <el-input v-model="scope.row.realStock"></el-input>
                    </template>
                </el-table-column>
                <el-table-column property="code" label="差异" align="center">
                    <template slot-scope="scope">
                        {{ !scope.row.realStock ? scope.row.stock : scope.row.stock - scope.row.realStock }}
                    </template>
                </el-table-column>
                <el-table-column property="code" label="条形码" align="center"></el-table-column>
                <el-table-column property="brand" label="品牌" align="center"></el-table-column>
                <el-table-column property="spec" label="规格" align="center"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                 style="float:right;"
            background
            v-if="hid"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tatal"
                >
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer" v-show="hidee">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="preservation">保存</el-button>
            </div>
        </el-dialog>
        <!-- 打印预览 -->
        <el-dialog title="打印预览" :visible.sync="dialogTableVisibl">
            <div id="printMe">
            <el-descriptions class="margin-top" title="盘库信息" :column="3" border>
                <el-descriptions-item>
                    <template slot="label"> 仓库： </template>
                    {{Printinformation.warehourseName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 盘库人员： </template>
                    {{Printinformation.createBy}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label"> 盘库时间： </template>
                    {{Printinformation.createTime}}
                </el-descriptions-item>
            </el-descriptions>
            <el-table :data="grdData">
                <el-table-column property="product.shelvesName" label="货架" width="150" align="center"></el-table-column>
                <el-table-column property="product.name" label="商品名称" width="200" align="center"></el-table-column>
                <el-table-column property="product.brand" label="品牌" align="center"></el-table-column>
                <el-table-column property="product.spec" label="规格" align="center"></el-table-column>
                <el-table-column property="stock" label="账面数量" align="center"></el-table-column>
                <el-table-column property="realStock" label="盘点数量" align="center"></el-table-column>
                <el-table-column property="address" label="差异" align="center">
                    <template slot-scope="scope">
                        {{ !scope.row.realStock ? scope.row.stock : scope.row.stock - scope.row.realStock }}
                    </template>
                </el-table-column>

            </el-table>
            </div>
             <div slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisibl = false">取 消</el-button>
    <el-button v-print="'#printMe'" type="primary"  @click="dialogTableVisibl = false">打印</el-button>
  </div>
        </el-dialog>
    </div>
</template>

<script>
import { Warehousedata, Itemaddition, Inventorysaving, Inventoryrecord,Printpreview } from '@/api/user';
export default {
    data() {
        return {
                         printObj:{
            id:'printMe',
            //其他配置项，
         },
            // 搜索框
            formInline: {
                pageNum: 1,
                pageSize: 10
            },
            // 总条目数
            total: undefined,
            // 开始盘库
            dialogTableVisible: false,
            // 盘库数据
            gridData: [],
            // 盘库搜索
            form: {
                pageNum: 1,
                pageSize: 10,
                combin: 0
            },
            // 盘库总条目数
            tatal: undefined,
            // 仓库
            option: [],
            // 显示隐藏
            disabled: false,
            status: 0,
            // 盘库数组
            list: [],
            // 页面数据
            tableData: [],
            // 打印预览
            dialogTableVisibl: false,
            // 打印表单
            Printform:{
                pageNum:1,
                pageSize:1000,
                category:3,
                oId:undefined
            },
            // 盘库信息
            Inveinfo:{
                product:{warehourseName : null}
            },
            // 打印数据
            grdData:[],
            hide:false,
            hid:false,
            hidee:false,
printdata:[],
Printinformation:{}
        };
    },
    methods: {
        // 盘库搜索
        onSubmit() {
            Itemaddition(this.form).then((ref) => {
                // console.log(ref);
                this.gridData = ref.rows;
                this.tatal = ref.total;
              if(ref.rows == ''){
                    this.hid =false
                }else{
                    this.hid = true
                }
            });
        },
        // 搜索
        seath() {
            Inventoryrecord(this.formInline).then((ref) => {
                this.tableData = ref.rows;
                this.total = ref.total;
                // console.log(ref);
                  if(ref.rows == ''){
                    this.hide =false
                }else{
                    this.hide = true
                }
            });
        },
        // 重置
        Reset(formName) {
            this.$refs[formName].resetFields();
            // this.$refs.formInline.resetFields()
            this.onSubmit();
            this.seath()
        },
        // 盘库弹窗页面分页
        handleSizeChange(val) {
            this.form.pageSize = Number(val);
            this.onSubmit();
        },
        // 页面分页（页数）
        handleCurrentChang(val) {
            this.formInline.pageNum = Number(val);
            this.seath();
        },
        // 页面分页
        handleSizeChang(val) {
            this.formInline.pageSize = Number(val);
            this.seath();
        },
        // 盘库弹窗页面分页（页数）
        handleCurrentChange(val) {
            this.form.pageNum = Number(val);
            this.onSubmit();
        },
        // 开始盘库
        Inventory() {
            this.dialogTableVisible = true;
            this.Deliverywarehouse();
            this.onSubmit();
        },
        // 确认盘库
        Confirminventory() {
            if (this.form.wId) {
            this.hidee = true
                this.status = 1;
                this.onSubmit();
            }else{
                this.$message.error('请选择仓库');
        //         this.$message({
        //   message: '',
        //   type: 'success'
        // });
            }
        },
        // 仓库
        Deliverywarehouse() {
            Warehousedata().then((ref) => {
                // console.log(ref);
                this.option = ref.rows;
            });
        },
        // 数据显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
        // 保存
        preservation() {
            this.gridData.forEach((v) => {
                // console.log(v);
                let getdate = {
                    pId: v.pId,
                    stock: v.stock,
                    category: 3,
                    realStock: v.realStock
                };
                this.list.push(getdate);
            });
            Inventorysaving([...this.list]).then((ref) => {
                console.log(ref);
                this.dialogTableVisible = false
                this.$message({
          message: ref.msg,
          type: 'success'
        });
            });
        },
        // 打印预览
        handleClick(val) {
this.Printform.oId = val.id
this.dialogTableVisibl = true
Printpreview(this.Printform).then((ref)=>{
    console.log(ref.rows[0].product);
    this.grdData = ref.rows
    this.Printinformation = ref.rows[0].product
})
        }
    },
    mounted() {
        this.seath();
    }
};
</script>

<style lang="less" scoped>
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin: 20px 0px 10px;
}
.Addexport /deep/ .el-button {
    widows: 70px !important;
}
.block{
    height: 20px;
    margin-top: 10px;
}
/deep/.el-dialog{
    width: 65% !important;
}
</style>